<template>
	<div>
		<Button @click="addArticleBtn">新增做题技巧</Button>
		<br />
		<Row type="flex" align="middle">
			<i-Col :span="21">
				<Input
					placeholder="请输入题目编号/题干"
					style="width: 250px"
					v-model="keyword"
				>
					<span slot="prepend">关键字</span>
				</Input>
			</i-Col>
			<i-Col :span="3">
				<Button type="primary" size="default" @click="searchClick">搜索</Button>
				<Button size="default" @click="searchClear">清除</Button>
			</i-Col>
		</Row>
		<!-- 文章列表表格 -->
		<Table border :columns="columns1" :data="articlesList"></Table>
		<!-- 分页 -->
		<Page
			:total="pageInfo.count"
			show-elevator
			show-sizer
			:page-size-opts="pageInfo.pageSizeArr"
			:current="pageInfo.page"
			:page-size="pageInfo.defaultPageSize"
			@on-change="handleCurrentChange"
			@on-page-size-change="handleSizeChange"
			show-total
		/>
		<!-- 确认删除显示框 -->
		<Modal v-model="modal1" title="删除文章列表" @on-ok="ok" @on-cancel="cancel">
			<h3>即将删除当前文章列表，是否确认？</h3>
		</Modal>

		<!-- 预览对话框 -->
		<Modal v-model="modal2" title="做题技巧">
			<h2>{{ previewData.title }}</h2>
			<div class="rooow">
				录入人：
				<span>超级管理员</span>
			</div>
			<Icon type="ios-eye-outline" size="20" />
			<span>{{ previewData.creatorID }}</span>
			<div class="urlDv">文章链接：{{ previewData.videoURL }}</div>
			<div v-html="previewData.articleBody" class="articleContent"></div>
		</Modal>
	</div>
</template>
<script>
import { async } from 'q'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			columns1: [
				{ title: '序号', type: 'index', width: '60px', align: 'center' },
				{ title: '标题', key: 'title' },
				{ title: '阅读数', key: 'creatorID' },
				{
					title: '状态',
					render: (h, params) => {
						return h('span', params.row.state == 0 ? '启用' : '禁用')
					}
				},
				{ title: '录入人', key: 'creator' },
				{
					title: '操作',
					render: (h, params) => {
						return h('ButtonGroup', [
							h(
								'Button',
								{
									props: {
										type: 'info',
										size: 'small',
										ghost: 'ghost'
									},
									on: {
										click: async () => {
											const { data: res } = await this.$http.articlesId(params.row.id)
											console.log(res)
											this.previewData = res
											// 打开确认删除框
											this.modal2 = true
										}
									}
								},
								'预览'
							),
							h(
								'Button',
								{
									props: {
										type: 'primary',
										size: 'small',
										ghost: 'ghost'
									},
									on: {
										click: () => {
											this.articleID(params.row.id)
											this.$router.push({ name: 'articlesAdd' })
										}
									}
								},
								'修改'
							),
							h(
								'Button',
								{
									props: {
										type: 'warning',
										size: 'small',
										ghost: 'ghost'
									},
									on: {
										click: () => {
											// 打开确认删除框
											this.modal1 = true
											// 存储当前列表的id
											this.delId = params.row.id
											console.log(this.delId)
										}
									}
								},
								'删除'
							),
							h(
								'Button',
								{
									props: {
										type: 'error',
										size: 'small',
										ghost: 'ghost'
									},
									on: {
										click: async () => {
											const states = params.row.state == 0 ? 1 : 0
											const { data: res } = await this.$http.articlesIdState(
												params.row.id,
												states
											)
											this.articlesAxios()
										}
									}
								},
								params.row.state == 0 ? '禁用' : '启用'
							)
						])
					}
				}
			],
			keyword: '',
			// 获取的文章列表数据
			articlesList: [],
			// 控制删除确认框的显示隐藏
			modal1: false,

			// 控制预览显示框的显示隐藏
			modal2: false,
			// 存储删除请求的id
			delId: 0,

			// 存储获取的预览数据
			previewData: []
		}
	},
	computed: {
		...mapState(['notification'])
	},
	created() {
		this.articlesAxios()
	},
	methods: {
		...mapMutations(['articleID']),
		async articlesAxios() {
			const { data: res } = await this.$http.articles(
				this.getQueryParams({ keyword: this.keyword })
			)
			this.pageInfo.count = res.counts
			this.articlesList = res.items
			// console.log(this.articlesList)
		},
		// 点击搜索关键词按钮触发
		searchClick() {
			this.articlesAxios()
		},
		// 点击清除按钮触发
		searchClear() {
			this.keyword = ''
			this.articlesAxios()
		},
		// 确认了删除操作
		async ok() {
			const { data: res } = await this.$http.articlesIdDel(this.delId)
			if (res.success == true) {
				this.$Message.success('删除成功！')
				this.articlesAxios()
			}
		},
		// 取消了删除操作
		cancel() {
			this.$Message.info('已取消删除！')
		},

		handleCurrentChange(newCurr) {
			this.pageInfo.page = newCurr
			this.articlesAxios()
		},
		handleSizeChange(newSize) {
			this.pageInfo.defaultPageSize = newSize
			this.articlesAxios()
		},
		addArticleBtn() {
			this.articleID('')
			this.$router.push(`articles/add`)
			this.notification.$emit('initAddArticlesForm')
		}
	}
}
</script>
<style lang="less" scoped>
.ivu-page {
	margin-top: 20px;
	text-align: right;
}
.ivu-input-wrapper {
	margin: 10px 0;
}
.ivu-btn-primary {
	margin-right: 5px;
}
.ivu-card-body {
	position: relative;
}

.ivu-icon {
	vertical-align: middle;
}
.rooow {
	margin: 10px 20px 0 0;
	display: inline-block;
}
.urlDv {
	margin-bottom: 20px;
}
</style>
